<template>
    <div class="achieveBasicInfo container">
        <div id="components-form-demo-advanced-search">
            <div class="tabCommonTitle">
                <span>申报及完成单位</span>
            </div>
            <!-- 申报单位 -->
            <div class="declareTableInfo">
                <div class="title">
                    <span>申报单位<i>最多可添加1个</i></span>
                    <div class="btnList">
                        <a-button :disabled="is_modify=='Y'?false:true" :class="is_modify=='Y'?'':'disabled'" class="download" @click="handleOperation(1, 'add')" type="primary">添加</a-button>
                    </div>
                </div>
                <div class="tableList">
                    <a-table :pagination="false" :data-source="data">
                        <a-table-column key="sbdw_qymc" title="单位名称" data-index="sbdw_qymc" />
                        <a-table-column key="areaName" title="所属省市" data-index="areaName" />
                        <a-table-column key="ssjt" title="所属集团" data-index="ssjt"/>
                        <a-table-column key="action" title="操作">
                            <template slot-scope="text, record">
                                <a>
                                    <img style="width:18px;height:18px;" @click="handelUpdate(text, record, 1, 'edit')" src="@/assets/img/bianji.png" alt="">
                                </a>
                            </template>
                        </a-table-column>
                    </a-table>
                </div>
            </div>
            <!-- 其他完成单位（除申报单位外的其他完成单位） -->
            <div class="declareTableInfo">
                <div class="title">
                    <span>其他完成单位（除申报单位外的其他完成单位）<i>最多可添加{{maxNum}}个</i></span>
                    <div class="btnList">
                        <a-button :disabled="is_modify=='Y'?false:true" :class="is_modify=='Y'?'':'disabled'" class="download" @click="handleOperation(2, 'add')" type="primary">添加</a-button>
                    </div>
                </div>
                <div class="tableList">
                    <a-table :pagination="false" :data-source="otherData">
                        <a-table-column key="wcdw_xh" title="单位序号" data-index="wcdw_xh" />
                        <a-table-column key="wcdw_qymc" title="单位名称" data-index="wcdw_qymc" />
                        <a-table-column key="areaName" title="所属省市" data-index="areaName" />
                        <a-table-column key="jttjdw_mc" title="所属集团" data-index="jttjdw_mc"/>
                        <a-table-column key="action" title="操作">
                            <template slot-scope="text, record">
                               <a>
                                    <img style="width:18px;height:18px;margin-right:11px;" @click="handelUpdate(text, record, 2, 'edit')" src="@/assets/img/bianji.png" alt="">
                                    <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-left:11px;" @click="handelWcDelete(text, record)" src="@/assets/img/shanchu1.png" alt="">
                                </a>
                            </template>
                        </a-table-column>
                    </a-table>
                </div>
            </div>
        </div>
        <addUnit
            :is_modify="is_modify"
            ref="addUnit" 
            :id="id"
            :flag="flag" 
            :type="type" 
            :obj="obj" 
            @saveUnit="saveUnit"
            @editUnit="editUnit"
        />
    </div>
</template>
<script>
import { mapActions } from 'vuex'
import addUnit from './completeUnit/index';
import {
    // 完成单位保存
    cxjsbWcdwAdd,
    // 完成单位列表
    cxjsbWcdwList,
    // 完成单位删除
    cxjsbWcdwDelete,
    // 申报单位保存
    cxjsbSbdwAdd,
    // 申报单位列表
    cxjsbSbtjdwlist,
    // 省份
    cxjsbSfList,
    // 地市
    cxjsbListDsBySf,
} from '@/api/shenbao';
export default {
    name: 'CompleteUnit',
    components: {
        addUnit
    },
    props: ['is_modify'],
    data() {
        return {
            data:[],
            otherData: [],
            flag: false,
            type: "",
            obj: '',
            id: '',
        }
    },
    computed: {
        maxNum() {
            if (this.$route.query.type === '61') {
                return 2;
            } else {
                return 9;
            }
        }
    },
    mounted() {
        this.getCxjsbSbtjdwlist();
        this.getCxjsbWcdwList();
    },
    methods: {
        ...mapActions('fillingSteps', ['getStatus']),
        // 新增单位
        saveUnit(data){
            let that = this;
            if (that.type == 2) {
                cxjsbWcdwAdd(data).then(res=>{
                    let data = res.data;
                    if (data.success) {
                        that.$message.success('添加成功');
                        // that.flag = false;
                        that.$refs.addUnit.handleCancel();
                        that.getCxjsbWcdwList();
                        that.getStatus(that.$route.query.cxj_cxj_id)
                    } else {
                        that.$message.error(data.message);
                    }
                })
            } else {
                cxjsbSbdwAdd(data).then(res=>{
                    let data = res.data;
                    if (data.success) {
                        that.$message.success('添加成功');
                        // that.flag = false;
                        that.$refs.addUnit.handleCancel();
                        that.getCxjsbSbtjdwlist();
                        that.getStatus(that.$route.query.cxj_cxj_id)
                    } else {
                        that.$message.error(data.message);
                    }
                })
            }
        },
        // 更新单位
        editUnit(data){
            let that = this;
            if (that.type == 2) {
                cxjsbWcdwAdd(data).then(res=>{
                    let data = res.data;
                    if (data.success) {
                        that.$message.success('修改成功');
                        // that.flag = false;
                        that.$refs.addUnit.handleCancel();
                        that.getCxjsbWcdwList();
                    } else {
                        that.$message.error(data.message);
                    }
                })
            } else {
                cxjsbSbdwAdd(data).then(res=>{
                    let data = res.data;
                    if (data.success) {
                        that.$message.success('修改成功');
                        // that.flag = false;
                        that.$refs.addUnit.handleCancel();
                        that.getCxjsbSbtjdwlist();
                    } else {
                        that.$message.error(data.message);
                    }
                })
            }
        },
        handleOperation(type, obj){
            // console.log(type, obj)
            if (obj == 'add') {
                if (type == 1) {
                    if (this.data.length == 1) {
                        this.$message.warning('最多只能添加1个')
                    } else {
                        this.type = type;
                        this.obj = obj;
                        this.flag = !this.flag;
                    }
                } else  {
                    if (this.otherData.length == 9) {
                        this.$message.warning('最多只能添加9个')
                    } else {
                        this.type = type;
                        this.obj = obj;
                        this.flag = !this.flag;
                    }
                }
            }
        },
        // 申报单位列表
        getCxjsbSbtjdwlist(){
            cxjsbSbtjdwlist({
                cxj_cxj_id: this.$route.query.cxj_cxj_id
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    data.result.map((list, index)=>{
                        list.key = index;
                        list.areaName = list.sf;
                        list.areaName += list.ds;
                    })
                    this.data = data.result;
                }
            })
        },
        // 完成单位列表
        getCxjsbWcdwList(){
            cxjsbWcdwList({
                cxj_cxj_id: this.$route.query.cxj_cxj_id
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    data.result.map((list, index)=>{
                        list.key = index;
                        list.areaName = list.sf;
                        list.areaName += list.ds;
                    })
                    this.otherData = data.result;
                }
            })
        },
        handelUpdate(text, record, type, obj){
            this.type = type;
            this.flag = !this.flag;
            this.id = record.id;
            this.obj = obj;
        },
        handelWcDelete(text, record){
            const self = this;
            this.$confirm({
                content: '确定要删除该项吗？',
                onOk() {
                    cxjsbWcdwDelete({
                        cxj_cxj_id: self.$route.query.cxj_cxj_id,
                        id: record.id
                    }).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            self.$message.success('删除成功');
                            self.getCxjsbWcdwList();
                        } else {
                            self.$message.error(data.message);
                        }
                    })
                },
                cancelText: '取消',
                onCancel() {
                    self.destroyAll();
                },
            });
        },
        destroyAll() {
            this.$destroyAll();
        }
    }
}
</script>
<style lang="less" scoped>
.declareTableInfo {
    margin-top: 24px;
    padding-bottom: 30px;
    border-bottom: 1px solid #EEEEEE;
    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #3388EE;
            line-height: 22px;
            i {
                font-size: 15px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #CB0C0C;
                line-height: 21px;
                margin-left: 10px;
                font-style: normal;
            }
        }
        .btnList {
            button {
                width: 70px;
                height: 32px;
                border: 1px solid #D9D9D9;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 20px;
                margin-left: 10px;
                &.download {
                    color: #FFFFFF;
                }
            }
        }
    }
    .tableList {
        margin-top: 21px;
    }
}
</style>
